AngularJs 学习笔记(一)

个人笔记整理,有误欢迎指正

作者 Mr.Woo 日期 2016-11-23
AngularJs 学习笔记(一)

AngularJs 学习笔记(一)

AngularJs简介


AngularJS是一款由Google公司开发维护的前端MVC框架MVW其克服了HTML在构建应用上的诸多不足,从而降低了开发成本提升了开发效率。

AngularJS与我们之前学习的jQuery是有一定的区别的,jQuery更准确来说只一个类库(类库指的是一系列函数的集合)以DOM做为驱动(核心),而AngularJS则一个框架(诸多类库的集合)以数据和逻辑做为驱动(核心)。框架对开发的流程和模式做了约束,开发者遵照约束进行开发,更注重的实际的业务逻辑。

AngularJS特性核心的是:模块化、双向数据绑定、语义化标签、依赖注入等。

顺便解释下什么是MVC概念

M:(Model模型)–>处理数据

V:(View 视图)–>展示数据–>html

C:(Controller控制器)–>协调view与Model之间的关系,也是两者之间的桥梁

用一种业务逻辑,数据,界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面.在改进和个性化定制界面及用户交互的同时不需要重新编写业务逻辑.

采用这种开发模式为合理组织代码提供了方便、降低了代码间的耦合度、功能结构清晰可见。

体验AngularJs


1.引入angular.js文件

2.创建模块

AngularJS提供了一个全局对象angular,在此全局对象下存在若干的办法,其中angular.module()方法用来定义一个模块。

第一个参数:模块名称

第二个参数:依赖模块名称

var app = angular.module('app',[]);

3.创建控制器 ($scope就是模型)

控制器(controller)作为连接模型(model)和视图(view)的桥梁存在,所以当我们定义好了控制器以后也就定义好了模型和视图。

第一个参数:控制器的名称

第二个参数:依赖的服务 (例如:$scope、$http)

app.controller('wooController',
['$scope',function ($scope) {
 $scope.name = 'woo';
 }]);

4.绑定模块

一个页面可以绑定多个模块,但是模块之间不能嵌套。通常一个html里面只对应一个模块 app.

<body ng-app="app">

5.绑定控制器 一个模块可以绑定多个控制器

<ul ng-controller="wooController" >

6.展示数据

<li>{{name}}</li>